/**
 * top header module
 */
import React, { Component } from 'react';
import classnames from 'classnames';
import Paging from './Paging';
import Preview from './Preview';

const Header = (props)=>{
    const { status, setSwitchType } = props;
    const {switchType} = status;
    return(
        <nav className="nav-bar">
            <div className="navcenter">
                <Paging />
            </div>
            <div className="platSwitch ">
                <div id="threedSwitch" className={classnames('plat-item', { activebtn: switchType === 'ThreedAR' })} onClick={() => setSwitchType('ThreedAR')} name="ThreedAR">3D</div>
                <div id="surfaceSwitch" className={classnames('surface_switch', 'plat-item', { activebtn: switchType === 'PlaneAR' })} onClick={() => setSwitchType('PlaneAR')} name="PlaneAR">平面</div>
                <div id="h5Switch" className={classnames('plat-item', { activebtn: switchType === 'H5AR' })} onClick={() => setSwitchType('H5AR')} name="H5AR">H5</div>
            </div>
            <Preview />
        </nav>
    )
}

export default  Header
